<!-- 
 * 科研机构管理新增，编辑，详情组件
 * @author: 
 * @since: 2022-05-20
 * index.vue
-->
<template>
    <div class="scientific-com-container detailsPageBox p20">
        <div class="detailsMain" id="pdfDom">
            <div class="organization-logo">
                <div class="title">
                    <div></div>
                    <div class="word">机构图标</div>
                </div>
                <div class="add-organization-logo">
                    <el-upload class="avatar-upload" action="#" :show-file-list="false" list-type="picture" :auto-upload="false" :on-change="upload" :disabled="props.type === 3">
                        <img v-show="state.logo" :src="state.logo" class="avatar" />
                        <div class="upload-box" v-show="!state.logo">
                            <div class="content">
                                <div class="icon"><svg-icon name="jiahao" color="#9AA8CC" size="32px"></svg-icon></div>
                                <div class="word"><span>添加图片</span></div>
                            </div>
                        </div>
                    </el-upload>
                </div>
            </div>
            <div class="basic-info">
                <div class="title">
                    <div></div>
                    <div class="word">基本信息</div>
                </div>
                <el-form :model="form" label-position="right" :rules="rules" ref="validateForm">
                    <div class="add-basic-info">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="机构名称：" label-width="120px" prop="name" v-if="props.type !== 3">
                                    <el-input v-model="form.name" placeholder="请填写机构名称" size="mini" clearable @change="nameBlur" />
                                </el-form-item>
                                <el-form-item label="机构名称：" label-width="120px" v-else class="detailsKey">
                                    <div class="detailsValue">{{ form.name }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系电话：" label-width="100px" v-if="props.type !== 3">
                                    <el-input v-model="form.contact" placeholder="请填写机构联系电话" type="number" size="mini" clearable />
                                </el-form-item>
                                <el-form-item label="联系电话：" label-width="100px" v-else class="detailsKey">
                                    <div class="detailsValue">{{ form.contact }}</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="机构专利数量：" label-width="130px" prop="patentCount" v-if="props.type !== 3">
                                    <el-input v-model="form.patentCount" placeholder="请填写机构专利数量" type="number" size="mini" clearable />
                                </el-form-item>
                                <el-form-item label="机构专利数量：" label-width="130px" v-else class="detailsKey">
                                    <div class="detailsValue">{{ form.patentCount }}</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="机构所在地：" label-width="120px" class="detailsKey" v-if="props.type === 3">
                                    <div class="detailsValue">{{ form.provinceName }}</div>
                                </el-form-item>
                                <el-form-item label="机构所在地：" label-width="120px" prop="location" class="noRules" v-else>
                                    <ChooseAddress width="100%" @changeAddress="changeAddress" :backInfo="props.type === 1 ? null : form"></ChooseAddress>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="详细地址：" label-width="100px" prop="address" v-if="props.type !== 3">
                                    <el-input v-model="form.address" placeholder="请填写详细地址" size="mini" clearable />
                                </el-form-item>
                                <el-form-item label="详细地址：" label-width="100px" v-else class="detailsKey">
                                    <div class="detailsValue">{{ form.address }}</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="organization-intro">
                        <div class="title">
                            <div></div>
                            <div class="word">机构简介</div>
                        </div>
                        <div class="organization-intro-input">
                            <el-form-item label="" prop="brief" v-if="props.type !== 3">
                                <!-- <el-input v-model="form.brief" :rows="10" type="textarea" placeholder="请填写机构简介" /> -->
                                <TextEditor @textEdit="textEdit" :html="form.brief"></TextEditor>
                            </el-form-item>
                            <div class="detailsBrief" v-else v-html="form.brief"></div>
                        </div>
                    </div>
                    <div class="enable" v-if="props.type !== 3">
                        <el-form-item label="是否启用：" prop="valid">
                            <el-radio-group v-model="form.valid">
                                <el-radio :label="item.label" v-for="(item, index) in radioList" :key="index">{{ item.value }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <!-- <div class="recommend" v-if="props.type !== 3">
            <el-form-item label="是否推荐：" prop="isRecommend">
              <el-radio-group v-model="form.isRecommend">
                <el-radio :label="item.label" v-for="(item, index) in radioList" :key="index">{{ item.value }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div> -->
                </el-form>
            </div>
        </div>
        <div class="detailsHandleBtn" v-if="props.type !== 3">
            <el-button type="primary" size="mini" @click="addSubmit">提交</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
        </div>
        <div class="detailsHandleBtn" v-else>
            <el-button type="primary" size="mini" v-print="'#pdfDom'">导出为PDF</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, defineProps, nextTick } from 'vue'
import { scientificAddApi, getCompanyEidByOrganizationNameApi, companyLogoUploadApi, getCompanyLogoByEidApi, scientificEditApi } from '@/api/interface/scientific.js'
import { ElMessage } from 'element-plus'
import { successHandle, detailHandleFinish } from '@/utils/common.js'
import { sessionstorage } from '@/utils/storage.js'

const props = defineProps({
    type: {
        type: Number,
        default: 1 //1.新增 2.编辑 3.详情
    }
})

const form = reactive({
    id: '',
    eid: '',
    name: '',//机构名称
    contact: '',//联系电话
    patentCount: '',//机构专利数量
    address: '',//详细地址
    brief: '',//机构简介
    valid: true,//是否启用
    // isRecommend: true,//是否推荐
    provinceCode: '',//省级行政代码
    provinceName: '',//省级行政名称
    cityCode: '',//市级行政代码
    cityName: '',//市级行政名称
    areaCode: '',//县/区级行政代码
    areaName: '',//县/区级行政名称
    location: 'default',
    file: null,//公司机构图标
})

const area = reactive({
    provinceCode: '530000',//省级行政代码
    provinceName: '云南省',//省级行政名称
    cityCode: '530100',//市级行政代码
    cityName: '昆明市',//市级行政名称
    areaCode: '530102',//县/区级行政代码
    areaName: '五华区',//县/区级行政名称
})

const scientificInfo = sessionstorage.get('scientificInfo')


const validateForm = ref(null)

//表单验证 
const rules = {
    name: [{ required: true, message: '必填项', trigger: 'blur' }],
    patentCount: [{ required: true, message: '必填项', trigger: 'blur' }],
    address: [{ required: true, message: '必填项', trigger: 'blur' }],
    valid: [{ required: true, message: '必选项', trigger: 'change' }],
    // isRecommend: [{ required: true, message: '必选项', trigger: 'change' }],
    location: [{ required: true, }],
    brief: [{ required: true, message: '必填项', trigger: 'blur' }],
};

const radioList = reactive([
    {
        label: true,
        value: '是'
    },
    {
        label: false,
        value: '否'
    },
])

const state = reactive({
    logo: '',//机构图标
})


onMounted(() => {
    nextTick(() => {
         if (props.type !== 1) {//详情或者编辑
            for (let key in scientificInfo) {
                form[key] = scientificInfo[key]
            }
        }
        if (form.eid) {//如果是工商局能查出来的公司
            getCompanyLogoByEid()
        }
        
    })

   

})


//根据eid获取公司logo
const getCompanyLogoByEid = () => {
    const params = {
        eid: form.eid
    }
    getCompanyLogoByEidApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.logo = data
        }





    })

}

//获取机构简介
const textEdit = (text, type) => {
    form.brief = text;
}
//机构名称失去焦点事件
const nameBlur = () => {
    getCompanyEidByOrganizationName()
}

//根据机构名称获取公司EID
const getCompanyEidByOrganizationName = async () => {
    if (form.name) {
        const params = {
            name: form.name
        }
        await getCompanyEidByOrganizationNameApi(params).then(res => {
            const { status, data } = res
            if (status == 200) {
                form.eid = data
            }
        })
        await getCompanyLogoByEid()
    }


}


//机构所在地
const changeAddress = (data) => {
    for (let key in data) {
        form[key] = data[key]
    }
}

//上传图片
const upload = (file) => {
    form.file = file.raw
    state.logo = file.url;
}

//科研机构新增提交
const addSubmit = () => {
    validateForm.value.validate(async (valid) => {
        if (valid) {
            const params = {
                id: form.id,
                eid: form.eid,//eid
                name: form.name,//机构名称
                contact: form.contact,//机构联系电话
                patentCount: form.patentCount,//机构专利数量
                address: form.address,//详细地址
                brief: form.brief,//机构简介
                valid: form.valid,//是否启用
                // isRecommend: form.isRecommend,//是否推荐
                provinceCode: form.provinceCode,//省code
                provinceName: form.provinceName,//省名字
                cityCode: form.cityCode,//城市code
                cityName: form.cityName,//城市名字
                areaCode: form.areaCode,//市区code
                areaName: form.areaName//市区名字
            }
            if (form.id) {//编辑
                await scientificEditApi(params).then(res => {
                    detailHandleFinish(res, 'Scientific')
                })

            } else {//新增
                await scientificAddApi(params).then(res => {
                    detailHandleFinish(res, 'Scientific')
                })
            }
            if (form.file) {//有文件
                console.log('有文件');
                const file = {
                    file: form.file,
                    eid: form.eid
                }
                const formData = new FormData();
                formData.append('file', form.file)
                formData.append('eid', form.eid)
                await companyLogoUploadApi(formData).then(res => {
                    const { status } = res
                    if (status == 200) {
                        ElMessage({
                            message: '上传机构头像成功',
                            type: 'success',
                        })
                    }
                })
            }
        } else {
            console.log('没通过验证');
        }
    })
}

//重置
const reset = () => {
    if (props.type === 2) {
        for (let key in scientificInfo) {
            form[key] = scientificInfo[key]
        }
        getCompanyLogoByEid()
        return
    }
    validateForm.value.resetFields()
    for (let key in form) {
        switch (key) {
            case 'location':
                form[key] = 'default'
                break;
            case 'valid':
                form[key] = true
                break;
            // case 'isRecommend':
            //   form[key] = true
            //   break;
            default:
                form[key] = ''
        }
    }
    state.logo = ''
    for (let key in area) {
        form[key] = area[key]
    }

}



</script>

<style lang="scss" scoped>
.title {
    display: flex;
    margin-bottom: 20px;

    div {
        &:first-child {
            width: 6px;
            background-color: #00a2ff;
            margin-right: 10px;
        }
    }

    .word {
        color: #333;
        font-weight: bold;
        font-size: 16px;
    }
}

.organization-logo {
    .add-organization-logo {
        margin-bottom: 30px;

        .avatar-upload {
            .avatar {
                width: 120px;
                height: 120px;
            }

            .upload-box {
                width: 120px;
                height: 120px;
                background: #f5f7fd;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    text-align: center;
                }

                .word {
                    color: #a3adc5;
                    font-size: 14px;
                    margin-top: 10px;
                }
            }
        }
    }
}

.basic-info {
    margin-bottom: 30px;

    .add-basic-info {
        width: 100%;
        background: #f5f7fd;
        border-radius: 4px;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
    }

    .organization-intro {
        margin-top: 30px;
    }

    .detailsKey {
        :deep(.el-form-item__label) {
            color: #333333;
            font-size: 14px;
        }

        .detailsValue {
            color: #333333;
            font-size: 14px;
            font-weight: bold;
        }
    }

    .detailsBrief {
        color: #333333;
        font-size: 12px;
        margin-bottom: 20px;
    }
}
</style>
